<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				
				<roc-icon-plus type="fas" name="globe-asia" :size="85" color="#5555ff" ></roc-icon-plus>
				<!-- <image :src="logoImage"></image> -->
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="mobile" type="text" maxlength="11" placeholder="手机号" :focus="isFocus"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="密码"></wInput>
			</view>
			<view class="agreement">
				<label class="checkbox">
					<checkbox :checked="agree" @tap="handleAgree" style="transform:scale(0.7)" />
				</label>
				<text class="text">我已阅读并同意</text>
				<navigator url="/pages/login/agreement" class="link">《用户服务协议》</navigator>
				<text class="text">和</text>
				<navigator url="/pages/login/privacy" class="link">《隐私政策》</navigator>
			</view>
			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click="startLogin"></wButton>

			<!-- 其他登录 -->
			<!-- <view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
			</view> -->

			<!-- 底部信息 -->
			<view class="footer">
				<!-- <navigator url="forget" open-type="navigate">找回密码</navigator> -->
				<!-- <text>|</text> -->
				<!-- <navigator url="register" open-type="navigate">注册账号</navigator> -->
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import whtMd5 from '@/uni_modules/wht-md5/js_sdk/wht-md5.js'

	export default {
		data() {
			return {
				agree: false, // 是否同意协议
				//logo图片 base64
				// logoImage: '',
				logoImage: '/static/avatar/avatar.png',
				mobile: '', //手机号
				passData: '', //密码
				isRotate: false, //是否加载旋转
				isFocus: true // 是否聚焦
			};
		},
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
			//this.isLogin();
		},
		onShow() {

		},
		onLoad(option) {
			// let istabbar = option.istabbar
			// let url = option.url
			// // //console.log(istabbar,url)
		},
		methods: {
			handleAgree() {
				this.agree = !this.agree
			},
			encrypt(pwd) {
				const hash32 = whtMd5(pwd)
				return hash32
			},

			startLogin() {
				if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并同意协议'
					});
					return;
				}

				// 手机号格式验证
				const mobileReg = /^1[3-9]\d{9}$/;
				if (!mobileReg.test(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
					return;
				}

				if (this.passData.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码不能少于6位'
					});
					return;
				}

				// 登录逻辑继续...
				this.isRotate = true;
				setTimeout(() => {
					this.isRotate = false;
				}, 1000);

				const users = uniCloud.importObject('users');
				users.login({
					mobile: Number(this.mobile),
					password: this.encrypt(this.passData)
				}).then(res => {
					if (res.code == 0) {
						uni.setStorageSync('isLogin', true);
						uni.setStorageSync('userInfo', res.data);
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}else{
						uni.showToast({
							title:res.message,
							icon:"error"
						})
					}
				}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: '登录失败，请重试'
					});
				});
			},
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");

	.agreement {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 0;
		font-size: 24rpx;
	}

	.checkbox {
		margin-left: 50rpx;
	}

	.text {
		color: #666;
	}

	.link {
		color: #007AFF;
		padding: 0 10rpx;
	}
</style>